<template>
    <li class="contentItem">
        <a :href="itemInfo.href">
            <img :src="require('../assets/imgs/'+itemInfo.img)" :data-src="require('../assets/imgs/'+ itemInfo.img)" alt="">
            <div>
                <span>{{itemInfo.proName}}</span>
            </div>
            <div class='secP'>
                <span>{{itemInfo.preferentialPrice}}</span>
                <span>{{itemInfo.originalCost}}</span>   
            </div>
            <div>{{itemInfo.shopName}}</div>
            <div>月销售<span>{{itemInfo.sell}}</span>件</div>
        </a>
    </li>
</template>
<script>
export default {
    props:{
        itemInfo:Object
    },
    created(){
        window.addEventListener('scroll',this.loadFn)
    },
    methods:{
        loadFn(){
            console.log(1)
        }
    }
}
</script>
<style>
    .contentItem{
        width: 20%;
        box-sizing: border-box;
        border: 1px solid #f2f2f2;
        border-top: none;
        border-left: none;
        margin: 0;
        float: left;
        height:368px;
        padding: 0;
    }

    .contentItem>a{
        display: inline-block;
        padding: 20px 22px 0;

    }
    .contentItem img{
        width: 198px;
        height: 198px;
    }
    .contentItem,.contentItem a,.contentItem span{
        line-height: 20px;
        font-size: 14px;
    }
    .contentItem div{
        margin-top: 5px;
    }
    .contentItem div:last-of-type{
        border-top: 1px solid #f2f2f2;
        font-size: 12px;
        text-align: right;
    }  
    .secP span:first-of-type{
        color: #fd3f31;
        font-size: 16px;
        font-weight: bold;
    }
    .secP span:last-of-type{
        font-size: 12px;
        text-decoration: line-through;
    }
    
</style>